<!--注册页-->
<script setup>
import {ref} from "vue";
import axios from "axios";
import qs from "qs";
import {ElMessage} from "element-plus";
import router from "@/router";

const num = ref(0);

const change0 =()=>{
  num.value = 0;
}

const change1 =()=>{
  num.value = 1;
}

</script>

<template>
  <div class="all">
    <div class="box">
      <div class="custom-links-container">
        <a href="#" class="custom-link" @click="change0()" style="position: absolute;left: 40px;">普通登录</a>
        <span style="position: absolute;left: 110px;">|</span>
        <a href="#" class="custom-link" @click="change1()" style="position: absolute;left: 130px;">动态密码登录</a>
      </div>
      <div class="content-left" v-if="num===0">
        <el-form>
          <el-form-item>
            <el-input placeholder="请输入手机号码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input type="password" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input placeholder="图形验证码" style="width: 100px;"></el-input>
            <img src="/imgs/login-yzm.jpg" alt="" style="margin: 0 10px">
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="login" style="width: 100%;">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="content-left" v-if="num===1">
        <el-form>
          <el-form-item>
            <el-input placeholder="请输入手机号码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input placeholder="图形验证码" style="width: 100px;"></el-input>
            <img src="/imgs/login-yzm.jpg" alt="" style="margin: 0 10px">
          </el-form-item>
          <el-form-item>
            <el-input placeholder="输入验证码" style="width: 100px;"></el-input>
            <el-button type="info" style="margin-left: 20px;">获取验证码</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="login" style="width: 100%;">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="content-right">
        <p>还没账号 ?</p>
        <router-link to="/reg" class="reg">立即注册-></router-link>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 默认样式 */
.custom-links-container {
  display: flex; /* 使用Flexbox布局 */
  align-items: flex-end; /* 垂直方向底部对齐 */
  margin-top: 20px;
}

.custom-link {
  position: relative; /* 设置相对定位，为了后面伪元素定位的参考 */
  text-decoration: none; /* 去掉下划线 */
  color: #000;
  font-size: 12px;
}

/* 悬停时的样式 */
.custom-link::after {
  content: ''; /* 必须有内容，这里设置为空 */
  position: absolute; /* 设置绝对定位，相对于父元素定位 */
  left: 50%; /* 从左边开始 */
  transform: translate(-50%, 0);
  bottom: -5px; /* 距离底部2像素 */
  width: 20px; /* 控制短线的长度 */
  height: 2px; /* 短线的粗细 */
  background-color: #0aa1ed; /* 短线的颜色 */
  opacity: 0; /* 初始时不可见 */
  transition: opacity 0.3s ease; /* 添加过渡效果 */
}

.custom-link:hover::after {
  opacity: 1; /* 悬停时显示短线 */
}

.custom-link:active::after{
  font-size: 20px;
}

p{
  text-align: center;
  margin: 0;
}
.box{
  height: 250px;
  width: 470px;
  background-color: #fff;
  border-radius: 10px;
  vertical-align: middle;
  padding: 20px;
  position: absolute;
  right: 10%;
  top: 50%;
  transform: translate(0, -50%);
}
.all{
  background-image: url("/public/imgs/login-bg.jpg");
  background-repeat: no-repeat; /* 取消背景重复 */
  background-size: 100%;
  width: 100%;
  height: 400px;
  padding: 0;
  position: relative;
}
.content-left{
  width: 250px;
  margin: 20px;
  padding-right: 20px;
  position: absolute;
  border-right: 1px solid #f5f2f2;
  left: 20px;
}
.content-right{
  width: 150px;
  position: absolute;
  right: 20px;
  text-align: center; /* 将文本对齐方式设置为居中 */
  align-items: center; /* 垂直居中 */
}
.reg{
  color: #0aa1ed;
  text-decoration: none;
}
</style>